<template>
  <div class="search">
    <el-button 
      size="small" 
      type="primary" 
      @click="openDrawerHandler"
    >添加</el-button>
  </div>
  <el-table size="small" :data="tableData" style="width: 99%">
    <el-table-column prop="roleId" label="角色编号" width="180" />
    <el-table-column prop="roleName" label="角色名称" />
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button 
          size="small" 
          type="warning" 
          @click="handleEdit(scope.row)"
        >编辑</el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.row)"
        >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-drawer
    v-model="openDrawer"
    :title="`${isAdd ? '添加' : '编辑'}角色`"
    :before-close="handleClose"
  >
    <div class="item">
      <span>角色名称：</span>
      <div>
        <el-input v-model="formData.roleName" placeholder="请输入角色名称" size="mini" />
      </div>
    </div>
    <div class="item">
      <span></span>
      <div>
        <el-button 
          size="small" 
          type="primary" 
          @click="editRole"
        >{{isAdd ? '添加' : '编辑'}}</el-button>
        <el-button 
          size="small" 
          @click="clearInput"
        >重置</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import {reactive, toRefs,} from 'vue';
import {getRoleList, addEditRole, delRole} from '../../api/role';
import {$confirm} from '../../utils/msg';

export default {
  name: 'Role',
  setup(){
    const state = reactive({
      tableData: [], //角色数据
      openDrawer: false, //是否显示 Drawer
      formData: {
        roleName: '', //角色名称
      },
      isAdd: true, //是否添加角色
    });

    //加载角色数据
    const loadTable = async () => {
      const data = await getRoleList();

      state.tableData = data;
    }

    loadTable();

    //添加、编辑角色
    const editRole = async () => {
      const result = await addEditRole(state.formData, state.isAdd);

      if(result){
        //成功
        loadTable();
      }
    }

    //打开抽屉
    const openDrawerHandler = () => {
      state.isAdd = true;
      state.openDrawer = true;
    }

    //点击重置按钮
    const clearInput = () => {
      state.formData = {
        roleName: '', 
      }
    }

    //关闭抽屉
    const handleClose = () => {
      clearInput();
      state.openDrawer = false;
    }

    //点击编辑按钮
    const handleEdit = (row) => {
      state.formData = {...row}
      state.isAdd = false;
      state.openDrawer = true;
    }

    //点击删除按钮
    const handleDelete = async (row) => {
      await $confirm('确定删除该角色吗？');

      const result = await delRole(row);

      if(result){
        //成功
        loadTable();
      }
    }

    return {
      ...toRefs(state),
      editRole,
      openDrawerHandler,
      handleClose,
      handleEdit,
      handleDelete,
      clearInput,
    }
  },
}
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  span {
    width: 70px;
    font-size: 14px;
    text-align: right;
  }
  div {
    flex: 1;
  }
}
</style>